<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body,
    .room {
      height: 100%;
      width: 100%;
    }

    .room {
      display: flex;
    }

    .left {
      width: 300px;
      border-right: 0.5px solid #f5f5f5;
      background: #333;
    }

    .right {
      background: #1c1c1c;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .header {
      background: #8d0eb0;
      color: white;
      padding: 10px;
      box-sizing: border-box;
      font-size: 20px;
    }

    .main {
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      font-size: 20px;
      overflow: auto;
    }

    .main-chat {
      color: green;
    }

    .footer {
      min-height: 200px;
      border-top: 1px solid green;
    }

    .footer .ipt {
      width: 100%;
      height: 100%;
      color: green;
      outline: none;
      font-size: 20px;
      padding: 10px;
      box-sizing: border-box;
    }

    .groupList {
      height: 100%;
      overflow: auto;
    }

    .groupList-items {
      height: 50px;
      width: 100%;
      background: #131313;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
  </style>
</head>
<div class="room">
  <div class="left">
    <div class="groupList">

    </div>
  </div>
  <div class="right">
    <header class="header">聊天室</header>
    <main class="main">

    </main>
    <footer class="footer">
      <div class="ipt" contenteditable></div>
    </footer>
  </div>
</div>

<body>
  <script type="module">
    let name = prompt('请输入你的姓名')
    let room = prompt('请输入你的房间')
    // 左侧列表父级
    const group = document.querySelector('.groupList')
    // 消息列表父级
    const main = document.querySelector('.main')
    // 输入框
    const ipt = document.querySelector('.ipt')

    const addChat = ({name, message}) => {
      let div = document.createElement('div')
      div.innerHTML = `${name}:${message}`
      div.className = 'main-chat'
      main.appendChild(div)
    }

    import { io } from "https://cdn.socket.io/4.7.4/socket.io.esm.min.js";
    const socket = io('ws://localhost:3000'); //ws的地址
    socket.on('connect', () => {
      // 加入房间
      // 监听会车消息
      document.addEventListener('keydown',(e) => {
        if(e.key === 'Enter'){
          const message = ipt.innerText
          socket.emit('message',{name,message,room})
          ipt.innerText = ''
          addChat({name,message})
        }
      })
      socket.emit('join',{name,room})
      // 修改左侧人数 房间
      socket.on('groupMap',(data) => {
        group.innerHTML = ''
        Object.keys(data).forEach(key => {
          let item = document.createElement('div')
          item.className = 'groupList-items'
          item.innerHTML = `房间号${key} 人数${data[key].length}`
          group.appendChild(item)
        })
      })
      socket.on('message',({name,message}) => {
        addChat({name,message})
      })
    })
  </script>


</body>

</html>